<template>
  <div class="content-wrapper">
    <div class="nav">
      <el-breadcrumb>
        <el-breadcrumb-item :to="{ path: '/administration-formerEmployee' }">人事档案</el-breadcrumb-item>
        <el-breadcrumb-item>离职员工列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="content">
      <div class="search-bar">
        <div>
          <el-input placeholder="按照名字模糊查询" prefix-icon="el-icon-search" v-model="searchData.userName" clearable style="width: 180px; margin-right: 10px;" @change="getUserList"></el-input>
        </div>
      </div>
      <div class="main-content">
        <el-table
          :data="userList"
          :height="tableHeight+'px'"
          border
          style="width: 100%">
          <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
          <el-table-column prop="realName" sortable label="姓名" min-width="100" align="center"></el-table-column>
          <el-table-column prop="position" sortable label="职位" min-width="200" align="center"></el-table-column>
          <el-table-column prop="mobile" sortable label="手机号" min-width="160" align="center"></el-table-column>
          <el-table-column prop="jobNumber" sortable label="工号" min-width="180" align="center"></el-table-column>
          <el-table-column prop="resignTime" sortable label="离职时间" min-width="120" align="center"></el-table-column>
          <el-table-column prop="resignReason" sortable label="离职原因" min-width="180" align="center"></el-table-column>
          <el-table-column label="操作" min-width="100" align="center">
            <template slot-scope="scope">
              <el-button type="text" style="padding: 0;" @click="showDetailDialog(scope.row.dingId)">查看编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageConfig.pageIndex"
            :page-sizes="[10, 15, 20, 50, 100, 500]"
            :page-size="pageConfig.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageConfig.totalCount">
          </el-pagination>
        </div>
      </div>
    </div>
    <personalDetail ref="personalDetail" v-if="dialogVisible"></personalDetail>
  </div>
</template>

<script>
import personalDetail from './personal-detail'
export default {
  name: '',
  data () {
    return {
      tableHeight: '',
      pageConfig: {
        pageIndex: 1,
        pageSize: 15,
        totalCount: 0,
      },
      userList: [],
      searchData: {
        userName: '',
        status: '0',
      },
      dialogVisible: false
    };
  },
  components: {
    personalDetail
  },
  mounted () {
    this.tableHeight = document.documentElement['clientHeight'] - 170
    window.onresize = () => {
      this.tableHeight = document.documentElement['clientHeight'] - 170
    }
    this.getUserList(true)
  },
  methods: {
    async getUserList(init) {
      if(init) this.pageConfig.pageIndex = 1
      let {data} = await this.$http({
        url: this.$http.adornUrl('hr/user/list'),
        method: 'post',
        data: this.$http.adornData({
          page: this.pageConfig.pageIndex,
          limit: this.pageConfig.pageSize,
          userName: this.searchData.userName,
          status: '0'
        })
      })
      if (data && data.code === 0) this.userList = data.page.list
      if(init) this.pageConfig.totalCount = data.page.totalCount
    },
    handleSizeChange(val) {
      this.pageConfig.pageSize = val;
      this.getUserList(true)
    },
    handleCurrentChange(val) {
      this.pageConfig.pageIndex = val;
      this.getUserList()
    },
    showDetailDialog(dingId) {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.personalDetail.init(dingId, true, false);
      })
    },
  }
}
</script>

<style lang='scss' scoped>
.content-wrapper {
  height: 100vh;
  min-width: 500px;
  .nav {
    display: flex;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    justify-content: space-between;
    border-bottom: 1px solid #DCDFE6;
    .el-breadcrumb {
      display: flex;
      align-items: center;
      .el-breadcrumb__item {
        float: none;
      }
    }
  }
  .content {
    height: calc(100vh - 50px);
    overflow: auto;
    .search-bar {
      padding: 0 20px;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .main-content {
      padding: 0 20px;
    }
    .page {
      height: 50px;
      display: flex;
      align-items: center;
      flex-direction: row-reverse;
    }
  }
}
</style>